﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditTourPackage.aspx.cs" Inherits="DLV.BackEnd.Pages.EditTourPackage" %>

<asp:content id="Content1" contentplaceholderid="placeHolderContent" runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    
    <style type="text/css">
        .tour-package { width: 100%;overflow: hidden;position: relative;}
        .tour-package .tp-tab { width: 100%;height: 30px;}
        .tour-package .tp-tab>span { display: block;float: left;padding:0 20px;cursor: pointer;border: 1px solid #ccc;margin-right: 3px;font-size: 15px;background-color: #333;color: #fff;height: 30px;line-height: 30px;}
        .tour-package .tp-tab>span:hover, .tour-package .tp-tab>span.active { background-color: transparent;background-color: #ff6021; }
        .tour-package .tp-content-wrapper {min-height: 195px;}
        .tour-package .tp-content { border: 1px solid #ccc;margin-top: 4px;overflow: hidden;padding: 20px;}
        .tour-package .tp-content>input { display: none;}
        .tour-package .tp-content>div>div { padding: 10px 0;text-align: center;font-size: 16px;color: #fff;background-color: #006400;}

        .sortable-list { background-color: #D6D6D6;list-style: none;margin: 0;min-height: 60px;padding: 10px;}
        .sortable-list>span { display: block;text-align: center;font-size: 15px;padding-top: 20px;font-weight: bold;}
        .sortable-item {background-color: #FCFCFC;border: 1px solid #000;cursor: move;display: block;font-weight: bold;margin-bottom: 5px;padding: 10px 15px;}
        .sortable-item:hover { background-color: #444;color: #ffffff;}
        .column {margin-left: 2%;width: 45%;float:left;}
        .column.first {margin-left: 0;}
    </style>
    <div id="toolbar-box">
		<div class="t">
			<div class="t">
				<div class="t"></div>
			</div>
		</div>
		<div class="m">
		    <div id="toolbar" class="toolbar">
			    <table class="toolbar">
			        <tbody>
					    <tr>
						    <td id="toolbar-save" class="button">
						        <asp:LinkButton ID="lbtSave" runat="server" Text="" onclick="lbtSave_Click" CssClass="toolbar">
					                <span id="Span1" title="Save" class="icon-32-save" runat="server"></span>Lưu
					            </asp:LinkButton>
						    </td>
						    <td id="toolbar-cancel" class="button">
						        <asp:LinkButton ID="lbtClose" runat="server" Text="" onclick="lbtClose_Click" 
                                    CssClass="toolbar" CausesValidation="False">
					                <span id="Span2" title="Close" class="icon-32-cancel" runat="server"></span>Thoát
					            </asp:LinkButton>
						    </td>
					    </tr>
				    </tbody>
			    </table>
		    </div>
			<div class="header" style="padding-left: 0;">Thêm mới/chỉnh sửa gói tour</div>
			<div class="clr"></div>
		</div>
		<div class="b">
			<div class="b">
				<div class="b"></div>
			</div>
		</div>
	</div>
    <div class="tour-package">
        <div id="element-box">
            <div class="tp-control m">
                <table class="adminform">
                    <tr>
						<td colspan="2">
                            <div id="ErorMessage" style="color: Red;line-height: 150%;"></div>
                        </td>
					</tr>
                    <tr>
                        <td style="width: 10%;">Tên gói tour:</td>
                        <td>
                            <asp:TextBox ID="txtTourPackageName" runat="server" Width="500px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Mã gói tour:</td>
                        <td>
                            <asp:TextBox ID="txtTourPackageCode" runat="server" Width="500px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Mô tả:</td>
                        <td>
                            <asp:TextBox ID="txtDescription" runat="server" Width="500px" Height="100px" TextMode="MultiLine"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>Lịch trình:</td>
                        <td>
                            <asp:DropDownList ID="ddlSchedule" runat="server" Width="513px"></asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Thị trường:</td>
                        <td>
                            <asp:DropDownList ID="ddlMartName" runat="server" Width="513px"></asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Tình trạng</td>
                        <td>
                            <asp:DropDownList ID="ddlStatus" runat="server" Width="200px"></asp:DropDownList>
                        </td>
                    </tr>
                    <tr>
                        <td>Người tạo</td>
                        <td>
                            <asp:DropDownList ID="ddlAdminUser" runat="server" Width="200px"></asp:DropDownList>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tp-content-wrapper" <%=IsAddService ? "" : "style=\"display:none;\""%>>
            <div class="tp-tab">
                <span itemtype="1,2,3" bind="transport" class="active">Phương tiện</span>
                <span itemtype="4" bind="restaurant">Nhà hàng</span>
                <span itemtype="5" bind="hotel">Khách sạn</span>
                <span itemtype="6" bind="visa">Visa</span>
                <span itemtype="7" bind="insurance">Bảo hiểm</span>
                <span itemtype="8" bind="service">Dịch vụ</span>
                <span itemtype="9" bind="travel-guide">Hướng dẫn viên</span>
                <span itemtype="10" bind="commission">Hoa hồng</span>
            </div>
            <div class="tp-content transport">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtTransports" runat="server" />
            </div>
            <div class="tp-content restaurant" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtRestaurants" runat="server" />
            </div>
            <div class="tp-content hotel" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtHotels" runat="server" />
            </div>
            <div class="tp-content visa" style="display: none;">            
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtVisas" runat="server" />
            </div>
            <div class="tp-content insurance" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtInsurances" runat="server" />
            </div>
            <div class="tp-content service" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtServices" runat="server" />
            </div>
            <div class="tp-content travel-guide" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtTravelGuides" runat="server" />
            </div>
            <div class="tp-content commission" style="display: none;">
                <div class="column first">
                    <div>Danh sách đang có</div>
				    <ul class="sortable-list ui-sortable select"></ul>
			    </div>
			    <div class="column">
			        <div>Danh sách đã chọn</div>
				    <ul class="sortable-list ui-sortable result"></ul>
			    </div>
                <input type="hidden" id="txtCommission" runat="server" />
            </div>
        </div>
    </div>

    <%if (IsAddService) { %>
    <link href="/css/popup.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
            var htmlLoading = '<div class="popup-loading-wrapper"></div><div class="popup-loading"><div class="pl-loading">Đang tải dữ liệu...</div></div>';
            var removeSpan = function() {
                $('.tp-content>div>ul>li').mouseenter(function () {
                    $('.tp-content>div>ul>span').remove();
                });
            };
            var validateInput = function() {
                $("#ErorMessage").html('');
                var rtnValue = validate($("#<%= txtTourPackageName.ClientID %>"), $("#ErorMessage"), "Vui lòng nhập tên gói tour<br\>")
                    && validateDropdown($("#<%=ddlSchedule.ClientID %>"), $("#ErorMessage"), "Vui lòng chọn lịch trình<br\>");
                return rtnValue;
            };
            var getItems = function(element) {
                var columns = [];
                $(element).each(function () {
                    columns.push($(this).sortable('toArray').join(','));
                });
                return columns;
            };
            var sorttable = function() {
                $('.sortable-list').sortable({
                    connectWith: '.sortable-list'
                });
            };
            var bindingItem = function (classBinding, scheduleId) {
                var priceItemType = $('.tp-tab span.active').attr('itemtype');
                var priceItemIds = $(classBinding).find('input').val();
                console.log(priceItemType + ' | ' + priceItemIds);
                $.ajax({
                    type: "POST",
                    url: "/ajax.html",
                    data: { "function": "ListPriceItemBySchedule", "ScheduleId": scheduleId, "PriceItemType": priceItemType, "PriceItemIds": priceItemIds },
                    dataType: "json",
                    success: function (data) {
                        if (!data.isError) {
                            $(classBinding + ' .select').html(data.htmlSelect == '' ? '<span>Không có dữ liệu</span>' : data.htmlSelect);
                            $(classBinding + ' .result').html(data.htmlResult == '' ? '<span>Không có dữ liệu</span>' : data.htmlResult);
                            if (data.htmlSelect != '' || data.htmlResult != '')
                                sorttable();
                        } else {
                            $(classBinding + ' .select').html('<span>Không có dữ liệu</span>');
                            $(classBinding + ' .result').html('<span>Không có dữ liệu</span>');
                        }
                        removeSpan();
                    }
                });
            };
            var loadData = function () {
                $('body').append(htmlLoading);

                setTimeout(function () {
                    var scheduleId = $('#<%=ddlSchedule.ClientID %> option:selected').val();
                    var classBinding = '.' + $('.tp-tab>span.active').attr('bind');
                    
                    if ($(classBinding).find('div').find('ul.select').html() == '' && $(classBinding).find('div').find('ul.result').html() == '') {
                        bindingItem(classBinding, scheduleId);
                    }
                    
                    $(classBinding).fadeIn(800);

                    $('.popup-loading-wrapper').remove();
                    $('.popup-loading').remove();
                }, 500);
            };

            $('#<%=lbtSave.ClientID %>').click(function () {
                if (!validateInput())
                    return false;
                if ($('.transport .result').html() != '' || $('.transport .select').html() != '')
                    $('#<%=txtTransports.ClientID %>').val(getItems('.transport .result'));
                if ($('.restaurant .result').html() != '' || $('.restaurant .select').html() != '')
                    $('#<%=txtRestaurants.ClientID %>').val(getItems('.restaurant .result'));
                if ($('.hotel .result').html() != '' || $('.hotel .select').html() != '')
                    $('#<%=txtHotels.ClientID %>').val(getItems('.hotel .result'));
                if ($('.visa .result').html() != '' || $('.visa .select').html() != '')
                    $('#<%=txtVisas.ClientID %>').val(getItems('.visa .result'));
                if ($('.insurance .result').html() != '' || $('.insurance .select').html() != '')
                    $('#<%=txtInsurances.ClientID %>').val(getItems('.insurance .result'));
                if ($('.service .result').html() != '' || $('.service .select').html() != '')
                    $('#<%=txtServices.ClientID %>').val(getItems('.service .result'));
                if ($('.travel-guide .result').html() != '' || $('.travel-guide .select').html() != '')
                    $('#<%=txtTravelGuides.ClientID %>').val(getItems('.travel-guide .result'));
                if ($('.commission .result').html() != '' || $('.commission .select').html() != '')
                    $('#<%=txtCommission.ClientID %>').val(getItems('.commission .result'));
            });

            $('#<%=ddlSchedule.ClientID %>').change(function () {
                $('.tp-content').find('div').find('ul.select').html('');
                $('.tp-content').find('div').find('ul.result').html('');
                loadData();
            });

            $('.tp-tab>span').click(function() {
                if (!$(this).hasClass('active')) {
                    $('.tp-content').hide();
                    $('.tp-tab>span').removeClass('active');
                    $(this).addClass('active');

                    loadData();
                }
            });

            //Default
            loadData();
        });
    </script>
    <%} else { %>
    <script type="text/javascript">
        $('#<%=lbtSave.ClientID %>').click(function () {
            $("#ErorMessage").html('');
            var rtnValue = validate($("#<%= txtTourPackageName.ClientID %>"), $("#ErorMessage"), "Vui lòng nhập tên gói tour<br\>")
                    && validate($("#<%= txtTourPackageCode.ClientID %>"), $("#ErorMessage"), "Vui lòng nhập mã gói tour<br\>")
                    && validate($("#<%= txtDescription.ClientID %>"), $("#ErorMessage"), "Vui lòng nhập mô tả gói tour<br\>")
                    && validateDropdown($("#<%=ddlSchedule.ClientID %>"), $("#ErorMessage"), "Vui lòng chọn lịch trình<br\>")
                    && validateDropdown($("#<%=ddlMartName.ClientID %>"), $("#ErorMessage"), "Vui lòng chọn thị trường<br\>");
            return rtnValue;
        });
    </script>
    <%} %>
</asp:content>
